<template>
  <div class="dashboard-editor-container">

    <panel-group :list="panelGroupData" @handleSetLineChartData="handleSetLineChartData" />
    <el-row style="background:#fff;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>
    <el-row style="background:#fff;margin-bottom:32px;">
      <bar-chart :chart-data="barChartData" />
    </el-row>
  </div>
</template>

<script>
import PanelGroup from '@/components/Charts/PanelGroup.vue'
import LineChart from '@/components/Charts/LineChart.vue'
import BarChart from '@/components/Charts/BarChart.vue'
import { getDashboard } from '@/api/dashboard'
import i18n from '@/lang'

export default {
  name: 'DashboardAdmin',
  components: {
    PanelGroup,
    LineChart,
    BarChart
  },
  data() {
    return {
      panelGroupData: [
        { label: i18n.t('dashboard.lineCount'), num: 0, key: 'lineCount', icon: 'table' },
        { label: i18n.t('dashboard.stationCount'), num: 0, key: 'stationCount', icon: 'tree' },
        { label: i18n.t('dashboard.produceCount'), num: 0, key: 'produceCount', icon: 'chart' },
        { label: i18n.t('dashboard.failCount'), num: 0, key: 'failCount', icon: 'bug' }],
      barChartData: {
        value1: [],
        value2: [],
        value3: [],
        label: [i18n.t('produce.produceOutput'), i18n.t('produce.reworkNumber'), i18n.t('produce.scrapNumber')],
        valueX: []
      },
      pieChartData: {
        actualData1: [],
        actualData2: [],
        actualData3: [],
        actualAxisX: [],
        legendData: ['已完成', '进行中', '其他']
      },
      lineChartData: {
        valueX: [],
        valueY: [],
        title: ''
      },
      stackBarChartData: {
        actualData1: [],
        actualData2: [],
        axisYData: [],
        legendData: ['已完成', '未完成']
      },
      list: {
        counts: [],
        barCharts: [],
        barChartData: {},
        finishedProjectNumList: [],
        onProjectNumList: [],
        otherProjectNumList: [],
        companyCode: [],
        projectNoList: [],
        finishedOplList: [],
        onOplList: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getDashboard().then(response => {
        this.list = response.data
        this.panelGroupData[0].num = this.list.counts[0]
        this.panelGroupData[1].num = this.list.counts[1]
        this.panelGroupData[2].num = this.list.counts[2]
        this.panelGroupData[3].num = this.list.counts[3]
        this.barChartData.valueX = this.list.barChartEx.valueX
        this.barChartData.value1 = this.list.barChartEx.value1
        this.barChartData.value2 = this.list.barChartEx.value2
        this.barChartData.value3 = this.list.barChartEx.value3
        this.handleSetLineChartData('stationCount')
      })
    },
    handleSetLineChartData(type) {
      if (type === 'stationCount') {
        this.lineChartData = this.list.barCharts[0]
        this.lineChartData.title = i18n.t('dashboard.stationCount')
      } else if (type === 'produceCount') {
        this.lineChartData = this.list.barCharts[1]
        this.lineChartData.title = i18n.t('dashboard.produceCount')
      } else if (type === 'failCount') {
        this.lineChartData = this.list.barCharts[2]
        this.lineChartData.title = i18n.t('dashboard.failCount')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px x0;
    //margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
